<script setup>
	import { defineProps, onMounted, ref } from 'vue'
	import { http } from '@/utils/http.js'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useUsercodeStore } from '@/store/usercode.js'
	import { parseTime } from '@/utils/index.js'

	// 创建 Store 实例
	const userCodeStore = useUsercodeStore()
	//广场列表
	const currentPage = ref(1)
	const keywords = ref('')
	const squareList = ref([])
	const isBuy = ref(0)
	const orderBy = ref('')
	async function getSquareList() {
		const res = await http.request({
			url: '/api/bidding/biddingSquare',
			method: 'POST',
			data: {
				page: currentPage.value,
				limit: 10,
				keywords: keywords.value,
				is_buy: isBuy.value,
				order_by: orderBy.value,
			},
		})
		console.log(res)
		squareList.value = [...squareList.value, ...res.data]
		squareList.value.forEach((item) => {
			item.goods.forEach((goods) => {
				const currentTimestamp = Math.floor(Date.now() / 1000)
				let daysShort = goods.pass_time - currentTimestamp
				goods.passDay = Math.floor(daysShort / (24 * 60 * 60))
			})
		})
	}

	// 一口价
	function buyNow() {
		currentPage.value = 1
		squareList.value = []
		if (isBuy.value == 0) {
			isBuy.value = 1
		} else {
			isBuy.value = 0
		}
		getSquareList()
	}

	//筛选最新、最热
	function sortBy(sort) {
		if (orderBy.value == sort) {
			return
		}
		currentPage.value == 1
		categaryPage.value = 1
		squareList.value = []
		orderBy.value = sort
		getSquareList()
	}

	// 搜索广场
	function searchSquare() {
		squareList.value = []
		currentPage.value = 1
		isBuy.value = 0
		orderBy.value = ''
		getSquareList()
	}

	// 参与/查看出价
	function joinPage(id) {
		uni.navigateTo({
			url: `/transactionPage/joinin/index?id=${id}`,
		})
	}

	// 查看出价
	function checkPayPrice(id) {
		uni.navigateTo({
			url: `/transactionPage/checkoffer/index?id=${id}`,
		})
	}

	//触底
	function squareListLower() {
		++currentPage.value
		getSquareList()
	}

	// 发布类型筛选
	const sendpopup = ref()
	const saleCategary = ref(0)
	const ruleId = ref(0)
	const sendGoodsList = ref([])
	const categaryPage = ref(1)
	async function sendGoods() {
		totalSum.value = 0
		categaryPage.value = 1
		sendGoodsList.value = []
		saleCategary.value = 0
		ruleId.value = 0
		all.value = false
		await getGoodsList()
		sendpopup.value.open('bottom')
	}

	async function getGoodsList() {
		const res = await http.request({
			url: '/api/bag/bagList',
			method: 'POST',
			data: {
				page: categaryPage.value,
				limit: 30,
				compound: 0,
				type: saleCategary.value,
				launch: 2,
				status: 1,
				is_bidding: 1,
				rule_id: ruleId.value,
			},
		})
		console.log(res)
		res.data.forEach((item) => {
			item.choosed = false
		})
		sendGoodsList.value = [...sendGoodsList.value, ...res.data]
	}

	//商品触底
	function goodsListLower() {
		if (totalSum.value < 200) {
			all.value = false
		}
		++categaryPage.value
		getGoodsList()
	}

	// 商品状态
	function setSaleCategary(type) {
		saleCategary.value = type
	}

	//赏级
	function setRuleId(type) {
		ruleId.value = type
	}

	// 重置筛选
	function resetCategory() {
		saleCategary.value = 0
		ruleId.value = 0
	}

	//确认筛选背包
	async function sureCategory() {
		totalSum.value = 0
		categaryPage.value = 1
		sendGoodsList.value = []
		await getGoodsList()
		categorypopup.value.close('top')
	}

	// 分类弹出
	const categorypopup = ref()
	async function categoryPOP() {
		await getAllRule()
		categorypopup.value.open('top')
	}

	//获取所有赏级
	const allRules = ref([])
	async function getAllRule() {
		const res = await http.request({
			url: '/api/bag/getRule',
			method: 'POST',
			data: {},
		})
		console.log(res.data)
		allRules.value = res.data
	}

	// 全选
	const all = ref(false)
	const ifchoose = ref(true)
	function chooseAll() {
		totalSum.value = 0
		if (ifchoose.value) {
			ifchoose.value = false
			all.value = true
			if (totalSum.value >= 200) {
				uni.utils.toast('最多只能选200个商品')
			}
			if (sendGoodsList.value.length <= 200) {
				console.log('<200')
				for (let i = 0; i < sendGoodsList.value.length; i++) {
					sendGoodsList.value[i].choosed = true
					totalSum.value++
				}
			} else {
				console.log('>200')
				for (let i = 0; i < 200; i++) {
					sendGoodsList.value[i].choosed = true
					totalSum.value++
				}
			}
			setTimeout(() => {
				ifchoose.value = true
			}, 1500)
		} else {
			uni.utils.toast('让手指放松下吧，请两秒后重试~')
		}
	}

	function cancelAll() {
		if (ifchoose.value) {
			ifchoose.value = false
			all.value = false
			sendGoodsList.value.forEach((item) => {
				item.choosed = false
			})
			totalSum.value = 0
			setTimeout(() => {
				ifchoose.value = true
			}, 1500)
		} else {
			uni.utils.toast('让手指放松下吧，请两秒后重试~')
		}
	}

	//选择背包商品
	const totalSum = ref(0)
	function chooseBagGoods(item) {
		if (item.choosed == true) {
			item.choosed = false
			all.value = false
			--totalSum.value
		} else {
			if (totalSum.value >= 200) {
				all.value = true
				uni.utils.toast('最多只能选200个商品')
				return
			}
			item.choosed = true
			++totalSum.value
			if (totalSum.value >= 200) {
				all.value = true
			}
		}
	}

	// 撤销发布
	function cancelSend() {
		totalSum.value = 0
		categaryPage.value = 1
		sendGoodsList.value = []
		saleCategary.value = 0
		ruleId.value = 0
		sendpopup.value.close('bottom')
	}

	// 去发布
	const chooseGoodsList = ref([])
	function goSend() {
		chooseGoodsList.value = []
		sendGoodsList.value.forEach((item) => {
			if (item.choosed) {
				chooseGoodsList.value.push(item)
			}
		})
		if (chooseGoodsList.value.length == 0) {
			uni.utils.toast('请选择发布商品')
		} else {
			console.log(chooseGoodsList.value)
		}
		uni.navigateTo({
			url: `/transactionPage/senddeal/index?list=${encodeURIComponent(
				JSON.stringify(chooseGoodsList.value)
			)}`,
		})
	}

	//商品详情弹出
	const goodspopup = ref()
	const goodsInfo = ref({
		goods_name: '',
		img: '',
	})
	function checkgoods(item) {
		console.log(item)
		goodsInfo.value = item
		goodspopup.value.open('bottom')
	}

	onMounted(() => {
		squareList.value = []
		getSquareList()
	})
	onShow(() => {})
</script>

<template>
	<view>
		<view class="search">
			<uni-search-bar
				class="uni-mt-10"
				radius="100"
				placeholder="搜索..."
				clearButton="auto"
				cancelButton="none"
				@confirm="searchSquare"
				@clear="searchSquare"
				v-model="keywords"
				style="width: 88%"
			/>

			<view class="avatar" @click="sendGoods">
				<image
					style="width: 76rpx; height: 76rpx; border-radius: 50%"
					:src="userCodeStore.usercode.himg"
					mode=""
				></image>
				<view class="world-bar"> 发布 </view>
			</view>
		</view>
		<view class="screen">
			<view class="screen-left"> </view>
			<view class="screen-right">
				<view
					class="screen-right-item"
					:class="{ 'screen-right-item-active': isBuy == 1 }"
					@click="buyNow"
				>
					一口价
				</view>
				<view
					class="screen-right-item"
					:class="{
						'screen-right-item-active': orderBy == 'new,desc',
					}"
					@click="sortBy('new,desc')"
				>
					最新
				</view>
				<view
					class="screen-right-item"
					:class="{
						'screen-right-item-active': orderBy == 'hot,desc',
					}"
					@click="sortBy('hot,desc')"
				>
					最热
				</view>
			</view>
		</view>
		<scroll-view
			scroll-y="true"
			class="scroll-Y"
			style="height: 80vh"
			@scrolltolower="squareListLower"
		>
			<view class="square-content">
				<view
					class="square-content-item"
					v-for="item in squareList"
					:key="'square' + item.id"
				>
					<view
						class=""
						style="
							position: absolute;
							top: 0;
							right: 0;
							width: 92rpx;
							height: 38rpx;
							border-radius: 0 12rpx 0 0;
							background-color: #3fb3fa;
							font-size: 22rpx;
							text-align: center;
							line-height: 38rpx;
							color: #fff;
						"
						v-if="item.is_cy == 1"
					>
						已参与
					</view>
					<view class="square-content-item-top">
						<view class="square-content-item-top-left">
							<view
								class=""
								style="
									position: relative;
									width: 88rpx;
									height: 88rpx;
									margin-right: 22rpx;
								"
							>
								<image
									:src="item.himg"
									style="
										width: 88rpx;
										height: 88rpx;
										border-radius: 50%;
									"
									mode=""
								></image>
								<view
									v-if="
										userCodeStore.usercode.user ==
										item.user_id
									"
									class="back"
									style="
										position: absolute;
										bottom: 0;
										left: 50%;
										transform: translateX(-50%);
										width: 64rpx;
										height: 28rpx;
										border-radius: 14rpx;
										font-size: 16rpx;
										line-height: 28rpx;
										text-align: center;
									"
								>
									我的
								</view>
							</view>
							<view
								class=""
								style="font-size: 30rpx; font-weight: 700"
							>
								{{ item.nickname }}
							</view>
						</view>
						<view
							class="top-time"
							style="font-size: 22rpx; color: #9b9b9d"
						>
							{{ parseTime(item.add_time) }}
						</view>
					</view>
					<view class="square-content-item-center">
						<scroll-view
							class="scroll-view_H"
							scroll-x="true"
							style="height: 120rpx; width: 100%"
						>
							<view class="scroll-view_H-list">
								<view
									class="scroll-view_H-item"
									style="position: relative"
									v-for="goods in item.goods"
									:key="'goods' + goods.id"
									@click="checkgoods(goods)"
								>
									<image
										:src="goods.img"
										style="
											width: 130rpx;
											height: 130rpx;
											display: block;
										"
										mode=""
									></image>
									<view
										class="presare"
										v-if="goods.type == 1"
									>
										预售
									</view>
									<view v-else class="passTime">
										<image
											src="../../../static/pass.png"
											style="width: 16rpx; height: 16rpx"
											mode=""
										></image>
										<view
											class=""
											style="
												font-size: 12rpx;
												color: #fff;
											"
										>
											{{ goods.passDay }}天后自动发货
										</view>
									</view>
								</view>
							</view>
						</scroll-view>
						<view class="total-goods"> 共{{ item.num }}件 </view>
					</view>
					<view class="square-content-item-bottom">
						<view class="square-content-item-bottom-left">
							<!-- <view class="square-content-item-bottom-left-item">
								<image
									src="@/static/start-price.png"
									style="
										width: 42rpx;
										height: 42rpx;
										margin-right: 10rpx;
									"
									mode=""
								></image>
								<view
									class=""
									style="font-size: 20rpx; font-weight: 700"
								>
									{{ item.min_price }}
								</view>
							</view> -->
							<view
								class="square-content-item-bottom-left-item"
								v-if="item.is_buy == 1"
							>
								<image
									src="@/static/one-price.png"
									style="
										width: 42rpx;
										height: 42rpx;
										margin-right: 10rpx;
									"
									mode=""
								></image>
								<view
									class=""
									style="font-size: 20rpx; font-weight: 700"
								>
									{{ item.buy_price }}
								</view>
							</view>
							<view class="square-content-item-bottom-left-item">
								<image
									src="@/static/join-num.png"
									style="
										width: 42rpx;
										height: 42rpx;
										margin-right: 10rpx;
									"
									mode=""
								></image>
								<view
									class=""
									style="font-size: 20rpx; font-weight: 700"
								>
									{{ item.participate_num }}
								</view>
							</view>
						</view>
						<view class="square-content-item-bottom-right">
							<view
								class="price-button button"
								v-if="
									userCodeStore.usercode.user == item.user_id
								"
								@click="checkPayPrice(item.id)"
							>
								查看出价
							</view>
							<view
								class="join-button button"
								v-else
								@click="joinPage(item.id)"
							>
								参与交易
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<!-- 发布商品 -->
		<uni-popup ref="sendpopup" type="bottom">
			<view class="sendpopup-content">
				<view class="sendpopup-content-title"> 我的背包 </view>
				<view class="sendpopup-content-screen">
					<view
						class="sendpopup-content-screen-left"
						@click="categoryPOP"
					>
						<view class=" " style="margin-right: 10rpx">
							筛选
						</view>
						<view class="aim"> </view>
						<view
							class="choose-all"
							style=""
							@tap.stop="chooseAll"
							v-if="!all"
						>
							全选
						</view>
						<view class="cancel-all" v-else @tap.stop="cancelAll">
							取消
						</view>
					</view>
					<view class="sendpopup-content-screen-right">
						<view
							class=""
							style="display: flex; align-items: center"
						>
							<view class="" style="font-weight: 500">
								已选择赏品：
							</view>
							<view class="num"> {{ totalSum }}个 </view>
						</view>
						<view
							class=""
							style="
								position: absolute;
								top: 140rpx;
								font-size: 20rpx;
								color: #9b9b9b;
							"
						>
							最多同时选择200个赏品哦
						</view>
					</view>
				</view>

				<scroll-view
					scroll-y="true"
					style="height: 67%"
					@scrolltolower="goodsListLower"
				>
					<view class="goods-list">
						<view
							class="goods-list-item"
							v-for="item in sendGoodsList"
							:key="'goods' + item.id"
						>
							<image
								@click="chooseBagGoods(item)"
								:src="item.img"
								style="width: 126rpx; height: 126rpx"
								mode=""
							></image>
							<image
								@click="chooseBagGoods(item)"
								v-if="item.choosed"
								src="https://ojqn.wm2177.com/wechat_imgs/transition/choosed.png"
								style="
									width: 126rpx;
									height: 126rpx;
									position: absolute;
									top: 0;
									left: 0;
									z-index: 1;
								"
								mode=""
							></image>
						</view>
					</view>
				</scroll-view>

				<view class="sendpopup-content-bottom">
					<view
						class="bottom-button"
						style="margin-right: 94rpx; background-color: #eeeeee"
						@click="cancelSend"
					>
						暂不发布
					</view>
					<view class="bottom-button" @click="goSend">
						发布交易
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 分类弹出层 -->
		<uni-popup ref="categorypopup" type="top">
			<view class="categorypopup">
				<view class="categorypopup-title"> 赏品类型 </view>
				<view class="categorypopup-category">
					<view
						class="categorypopup-category-item"
						:class="{
							'categorypopup-category-item-active': ruleId == 0,
						}"
						@click="setRuleId(0)"
						>全部
					</view>
					<view
						class="categorypopup-category-item"
						:class="{
							'categorypopup-category-item-active':
								ruleId == item.id,
						}"
						@click="setRuleId(item.id)"
						v-for="item in allRules"
						:key="'rule' + item.id"
						>{{ item.name }}
					</view>
				</view>
				<view class="categorypopup-title"> 商品状态 </view>
				<view class="categorypopup-category">
					<view
						class="categorypopup-category-item"
						:class="{
							'categorypopup-category-item-active':
								saleCategary == 0,
						}"
						@click="setSaleCategary(0)"
						>全部
					</view>
					<view
						class="categorypopup-category-item"
						:class="{
							'categorypopup-category-item-active':
								saleCategary == 2,
						}"
						@click="setSaleCategary(2)"
						>现货
					</view>
					<view
						class="categorypopup-category-item"
						:class="{
							'categorypopup-category-item-active':
								saleCategary == 1,
						}"
						@click="setSaleCategary(1)"
						>预售
					</view>
				</view>
				<view class="categorypopup-bottom">
					<view
						class="categorypopup-bottom-button"
						style="background-color: #f5f6fa; margin-right: 42rpx"
						@click="resetCategory"
					>
						重置
					</view>
					<view
						class="categorypopup-bottom-button"
						@click="sureCategory"
					>
						确认
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 详情弹出层 -->
		<uni-popup ref="goodspopup" type="bottom">
			<view class="goodspopup-content">
				<view class="goods-title">{{ goodsInfo.goods_name }} </view>
				<image
					:src="goodsInfo.img"
					style="width: 660rpx; height: 660rpx"
					mode=""
				></image>
			</view>
		</uni-popup>
	</view>
</template>

<style lang="scss" scoped>
	.search {
		display: flex;
		align-items: center;
		background-color: #fff;
		.avatar {
			position: relative;
			width: 76rpx;
			height: 76rpx;
			border-radius: 50%;
			.world-bar {
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 64rpx;
				height: 28rpx;
				border-radius: 14rpx;
				background-color: $transaction-color;
				text-align: center;
				line-height: 28rpx;
				font-size: 16rpx;
			}
		}
	}
	.screen {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background-color: #fff;
		.screen-left {
			font-weight: 700;
			font-size: 28rpx;
		}
		.screen-right {
			display: flex;
			align-items: center;
			.screen-right-item {
				width: 130rpx;
				height: 58rpx;
				margin-right: 16rpx;
				box-sizing: border-box;
				background-color: #f7f7f7;
				border-radius: 29rpx;
				text-align: center;
				line-height: 58rpx;
				font-size: 24rpx;
				&:last-child {
					margin-right: 0;
				}
			}
			.screen-right-item-active {
				background-color: $transaction-color !important;
			}
		}
	}
	.square-content {
		padding: 20rpx;
		.square-content-item {
			position: relative;
			height: 398rpx;
			margin-bottom: 20rpx;
			padding: 22rpx 18rpx 0 18rpx;
			box-sizing: border-box;
			border-radius: 12rpx;
			background-color: #fff;
			.square-content-item-top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				.square-content-item-top-left {
					display: flex;
					align-items: center;
				}
			}
			.square-content-item-center {
				position: relative;
				height: 182rpx;
				padding: 32rpx 0;
				box-sizing: border-box;
				border-bottom: 6rpx solid #f5f5f5;
				.total-goods {
					position: absolute;
					right: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 92rpx;
					height: 46rpx;
					background-color: #eeeeee;
					font-size: 26rpx;
					line-height: 46rpx;
					text-align: center;
					color: #9b9b9d;
				}
				.scroll-view_H {
					.scroll-view_H-list {
						display: flex;
						flex-wrap: nowrap;
						.scroll-view_H-item {
							width: 130rpx;
							height: 130rpx;
							margin-right: 20rpx;
							box-sizing: border-box;
							&:last-child {
								margin-right: 0;
							}
							.presare {
								position: absolute;
								top: 0;
								right: 0;
								width: 54rpx;
								height: 28rpx;
								border-radius: 0 10rpx 0 0;
								background-color: rgba(0, 0, 0, 0.5);
								font-size: 20rpx;
								line-height: 28rpx;
								text-align: center;
								color: #fff;
							}
							.passTime {
								position: absolute;
								top: 0;
								left: 0;
								display: flex;
								align-items: center;
								justify-content: center;
								width: 100%;
								height: 28rpx;
								border-radius: 10rpx 10rpx 0 0;
								background-color: rgba(0, 0, 0, 0.5);
							}
						}
					}
				}
			}
			.square-content-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 92rpx;
				.square-content-item-bottom-left {
					display: flex;
					align-items: center;
					.square-content-item-bottom-left-item {
						width: 134rpx;
						display: flex;
						align-items: center;
					}
				}
				.square-content-item-bottom-right {
					.button {
						width: 158rpx;
						height: 58rpx;
						border-radius: 29rpx;
						background-color: $transaction-color;
						text-align: center;
						line-height: 58rpx;
						font-size: 24rpx;
						font-weight: 700;
					}
				}
			}
		}
	}

	.sendpopup-content {
		position: relative;
		height: 78vh;
		border-radius: 26rpx 26rpx 0 0;
		background-color: #fff;
		.sendpopup-content-title {
			font-size: 32rpx;
			font-weight: 700;
			line-height: 84rpx;
			text-align: center;
		}
		.sendpopup-content-screen {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx 30rpx 20rpx;
			border-bottom: 8rpx solid #f7f7f7;
			.sendpopup-content-screen-left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 700;
				.aim {
					width: 15rpx;
					height: 15rpx;
					border-bottom: 4rpx solid #3d3d3d;
					border-right: 4rpx solid #3d3d3d;
					transform: rotate(45deg);
				}
				.choose-all {
					width: 92rpx;
					height: 50rpx;
					margin-left: 20rpx;
					background-color: $transaction-color;
					border-radius: 8rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 50rpx;
				}
				.cancel-all {
					width: 92rpx;
					height: 50rpx;
					margin-left: 20rpx;
					background-color: #eee;
					border-radius: 8rpx;
					font-size: 26rpx;
					text-align: center;
					line-height: 50rpx;
				}
			}
			.sendpopup-content-screen-right {
				display: flex;
				flex-direction: column;
				// align-items: center;
				font-size: 30rpx;
				font-weight: 700;
				.num {
					width: 138rpx;
					height: 54rpx;
					border-radius: 27rpx;
					background-color: $transaction-color;
					font-size: 26rpx;
					font-weight: 700;
					line-height: 54rpx;
					text-align: center;
				}
			}
		}
		.goods-list {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			padding: 20rpx;
			.goods-list-item {
				position: relative;
				width: 126rpx;
				height: 126rpx;
				margin-right: 20rpx;
				margin-bottom: 32rpx;
				box-sizing: border-box;
				border-radius: 8rpx;
				overflow: hidden;
				&:nth-child(5n) {
					margin-right: 0;
				}
			}
		}
		.sendpopup-content-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			bottom: 0;
			left: 0;
			height: 194rpx;
			width: 100%;
			box-shadow: 0rpx 10rpx 20rpx 0 rgba(0, 0, 0, 0.3);
			.bottom-button {
				width: 268rpx;
				height: 86rpx;
				background-color: $transaction-color;
				border-radius: 43rpx;
				font-size: 28rpx;
				font-weight: 700;
				line-height: 86rpx;
				text-align: center;
			}
		}
	}
	.categorypopup {
		position: relative;
		height: 830rpx;
		padding: 22rpx;
		box-sizing: border-box;
		background-color: #fff;
		.categorypopup-title {
			margin-bottom: 28rpx;
			font-size: 32rpx;
			font-weight: 700;
		}
		.categorypopup-category {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			.categorypopup-category-item {
				width: 116rpx;
				height: 52rpx;
				margin: 0 24rpx 20rpx 0;
				border: 2px solid #f4f4f4;
				box-sizing: border-box;
				font-size: 24rpx;
				line-height: 52rpx;
				text-align: center;
				color: #aaaaaa;
			}
			.categorypopup-category-item-active {
				background-color: $transaction-color;
				border: none;
				color: #3d3d3d;
			}
		}
		.categorypopup-bottom {
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: 0;
			bottom: 44rpx;
			width: 100%;
			.categorypopup-bottom-button {
				width: 276rpx;
				height: 86rpx;
				background-color: $transaction-color;
				font-size: 32rpx;
				font-weight: 700;
				line-height: 86rpx;
				text-align: center;
			}
		}
	}

	.goodspopup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		height: 886rpx;
		width: 710rpx;
		margin: 0 auto;
		padding-top: 36rpx;
		box-sizing: border-box;
		border-radius: 10rpx 10rpx 0 0;
		background-color: #fff;
		.goods-title {
			margin-bottom: 17rpx;
			font-size: 30rpx;
		}
	}
	::v-deep .uni-searchbar {
		padding: 0;
		background-color: transparent;
	}
	::v-deep .uni-searchbar__box {
		width: 100%;
		height: 72rpx !important;
		border: none !important;
		justify-content: start !important;
	}
	.back {
		background-color: $transaction-color;
	}
</style>
